import { useEffect } from 'react'
import dayjs from 'dayjs'
import { Card, Typography } from 'antd'
import {
  CheckCircleOutlined,
  ClockCircleOutlined,
  InfoCircleOutlined,
  IssuesCloseOutlined,
  StopOutlined,
  WarningOutlined,
} from '@ant-design/icons'

import { getStatusGroupName, getStatusName } from '@oBiz/components/EventSelect/utils'
import { useBoundStore } from '../../store'
import { useUrlParams } from '../../utils'
import styles from './styles.module.less'

export const StatusOverview = () => {
  const { waybillNo } = useUrlParams()

  const waybillStatusOverview = useBoundStore(state => state.waybillStatusOverview)
  const getWaybillStatusOverview = useBoundStore(state => state.getWaybillStatusOverview)

  const iconList = (status?: number) => {
    switch (status) {
      case 1:
        return <ClockCircleOutlined />
      case 2:
        return <CheckCircleOutlined />
      case 3:
        return <WarningOutlined />
      case 4:
        return <InfoCircleOutlined />
      case 5:
        return <IssuesCloseOutlined />
      case 6:
        return <StopOutlined />
      default:
        return null
    }
  }

  useEffect(() => {
    getWaybillStatusOverview(waybillNo)
  }, [])

  return (
    <Card style={{ height: '100%' }}>
      <div className={styles.statusOverview}>
        <Typography.Title level={5}>状态总览</Typography.Title>
        {waybillStatusOverview.map(item => (
          <div className={styles.status_item} key={item.status}>
            <div className={styles.status_item_info}>
              <div className={styles.status_item_info_left}>
                <div className={styles.status_item_info_left_icon}>{iconList(item.statusGroup)}</div>
                <div className={styles.status_item_info_left_label}>{getStatusGroupName(item.statusGroup)}</div>
              </div>
              <div className={styles.status_item_info_right}>
                <div className={styles.status_item_info_right_value}>{getStatusName(item.status)}</div>
              </div>
            </div>
            <div className={styles.status_item_time}>
              更新时间: {item.updateAt ? dayjs(item.updateAt).format('YYYY-MM-DD HH:mm:ss') : '--'}
            </div>
          </div>
        ))}
      </div>
    </Card>
  )
}
